<template>
  <el-popover
      placement="left-start"
      trigger="hover"
  >
    <template #reference>
      <div class="tw-w-68 tw-h-79 tw-pt-14 flex-column-center right-bar-item" :style="popoverItem.borderRadiusStyle" @mouseover="isHovered = true" @mouseleave="isHovered = false">
        <img  class="tw-w-30 tw-h-30" :src="isHovered? popoverItem.activeIcon : popoverItem.icon" alt="">
        <span class="tw-pt-2 tw-pb-14">{{popoverItem.title}}</span>
      </div>
    </template>
    <div class="flex-column-center">
      <div class="flex-column-center">
        <img class="tw-w-121 tw-h-130" :src="popoverItem.qrImage" alt="">
        <span class="tw-mt-10 tw-text-[#606266] font-small">{{popoverItem.content}}</span>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import {defineProps, ref} from 'vue'
const props = defineProps({
  popoverItem: {
    type: Object,
    default: {}
  },
});
const isHovered = ref(false)

</script>

<style lang="scss" scoped>
.right-bar-item {
  cursor: pointer;
}
.right-bar-item:hover {
  background-color: #04addb;
  border-radius: 4px;
  color: #ffffff;
}
</style>
